<!--
参考：第195~220集。
Ctrl + G    跳转到第几行（例如最后一行）

.header
    - .logo
    - .nav
    - .search
    - .user
导航栏模块【li+a】结构
    1）直接用a，容易被搜索引擎识别为【堆砌关键字】的嫌疑
    2）li结构更清晰有条理，不会被识别为关键字堆砌
    3）关键字没有堆砌，就不会被搜索引擎降权，从而提升网站排名

.banner
    - .w
        - .subnav
        - .course
塌陷是块元素之间才存在的，浮动元素是没有塌陷问题的

.goods
    - h3
    - ul
    - a

.main
    - .mheader
    - .mbody
浮动一行挤不下时，解决方案：
    方法1：父盒子宽度设置更大
    方法2：靠右边的盒子去掉右外边距
列表内容展示是灵活的，意味着高度是自动调整的，避免后面的标准流布局有误，记得清除浮动！

.footer
    - .w
        - .fleft
        - .fright
按场景效果选择margin、padding。
-->
<link rel="stylesheet" href="../resources/css/case.css">

<!-- ******************* header ******************* -->
<div class="header w">

    <div class="logo">
        <img src="../resources/img/logo.png" alt="网站logo图标">
    </div>

    <div class="nav">
        <ul>
            <li><a href="#">台式电脑</a></li>
            <li><a href="#">笔记本电脑</a></li>
            <li><a href="#">手机</a></li>
            <li><a href="#">女性包包</a></li>
            <li><a href="#">男士手表</a></li>
        </ul>
    </div>

    <div class="search">
        <input type="text" placeholder="请输入内容">
        <img src="../resources/img/search.png" alt="搜索图像">
    </div>

    <div class="user">
        <img src="../resources/img/user.png" alt="用户头像">
        <span>用户信息</span>
    </div>
</div>

<!-- ******************* banner ******************* -->
<div class="banner">
    <div class="w">
        <div class="subnav">
            <ul>
                <li><a href="#">子导航栏1<span>&gt;</span></a></li>
                <li><a href="#">子导航栏2<span>&gt;</span></a></li>
                <li><a href="#">子导航栏3<span>&gt;</span></a></li>
                <li><a href="#">子导航栏4<span>&gt;</span></a></li>
                <li><a href="#">子导航栏5<span>&gt;</span></a></li>
                <li><a href="#">子导航栏6<span>&gt;</span></a></li>
                <li><a href="#">子导航栏7<span>&gt;</span></a></li>
                <li><a href="#">子导航栏8<span>&gt;</span></a></li>
            </ul>
        </div>
        <div class="course">
            <h2>推荐课程</h2>
            <div class="db">
                <ul>
                    <li>
                        <h4>课程001</h4>
                        <p>课程内容001</p>
                    </li>
                    <li>
                        <h4>课程002</h4>
                        <p>课程内容002</p>
                    </li>
                    <li>
                        <h4>课程003</h4>
                        <p>课程内容003</p>
                    </li>
                </ul>
                <a href="#" class="more">全部课程</a>
            </div>
        </div>
    </div>
</div>

<!-- ******************* goods ******************* -->
<div class="goods w">
    <h2 class="title">精品推荐</h2>
    <ul>
        <li><a href="#">推荐01</a></li>
        <li><a href="#">推荐02</a></li>
        <li><a href="#">推荐03</a></li>
        <li><a href="#">推荐04</a></li>
        <li><a href="#">推荐05</a></li>
    </ul>
    <a href="#" class="mod">编辑推荐</a>
</div>

<!-- ******************* main ******************* -->
<div class="main w">
    <div class="mheader">
        <h4>精品课程</h4>
        <a href="#">查看全部</a>
    </div>
    <div class="mbody clearfix">
        <ul>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
            <li>
                <img src="../resources/img/item.png" alt="产品1号">
                <h4>JavaScript 进阶课程：源码剖析</h4>
                <div><span>高级</span> · 在线122人学习</div>
            </li>
        </ul>
    </div>
</div>

<!-- ******************* footer ******************* -->
<div class="footer">
    <div class="w">

        <div class="fleft">
            <img src="../resources/img/logo.png" alt="logo图片">
            <p>互联网的快速发展让越来越多的人在其中看到<br/>
                了机遇，为了满足大家日益强烈的消费需求，于是<br>
                商城系统，小程序，社区团购等线上商城获得了蓬<br>
                勃发展...</p>
            <a href="#">下载APP</a>
        </div>

        <div class="fright">
            <dl>
                <dt>联系我们</dt>
                <dd>小弟1-1</dd>
                <dd>小弟1-2</dd>
                <dd>小弟1-3</dd>
                <dd>小弟1-4</dd>
            </dl>
            <dl>
                <dt>新手指南</dt>
                <dd>小弟2-1</dd>
                <dd>小弟2-2</dd>
                <dd>小弟3-3</dd>
            </dl>
            <dl>
                <dt>关于商城</dt>
                <dd>小弟3-1</dd>
                <dd>小弟3-2</dd>
                <dd>小弟3-3</dd>
                <dd>小弟3-4</dd>
                <dd>小弟3-5</dd>
            </dl>
        </div>
    </div>
</div>